<template>
    <div>
        <el-card shadow="hover" class="juque_search_form">
            <div>
                <el-form ref="searchFormRef" size="default" :inline="true" :model="formModel.param">
                    <el-form-item label="配置名称" prop="configName">
                        <el-input v-model="formModel.param.configName" show-word-limit maxlength="100" placeholder=""
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="配置编码" prop="configCode">
                        <el-input v-model="formModel.param.configCode" show-word-limit maxlength="100" placeholder=""
                            clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button size="default" type="primary" @click="onSearch">
                            <el-icon>
                                <ele-Search />
                            </el-icon>
                            查询
                        </el-button>
                        <el-button size="default" type="default" @click="onRest">
                            <el-icon>
                                <ele-RefreshLeft />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card shadow="hover">
            <el-button-group class="juque_button_group">
                <el-button size="default" type="success" @click="onAdd">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增
                </el-button>
            </el-button-group>
            <el-table :data="datasource" :border="true" class="juque_table">
                <el-table-column prop="configName" label="配置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="configCode" label="配置编码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="configValue" label="配置值" show-overflow-tooltip></el-table-column>
                <el-table-column prop="scope" label="作用范围" show-overflow-tooltip>
                    <template #default="scop">
                        <el-tag>{{ dictScopeCompute(scop.row.scope) }}</el-tag> </template>
                </el-table-column>
                <el-table-column prop="syncFlag" label="是否允许同步" show-overflow-tooltip>
                    <template #default="scop">
                        <el-tag>{{ dictTypeCompute(scop.row.syncFlag) }}</el-tag> </template>
                </el-table-column>
                <el-table-column prop="validFlag" label="有效标识" show-overflow-tooltip><template #default="scop">
                        <el-tag>{{ dictTypeCompute(scop.row.validFlag) }}</el-tag> </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onEdit(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            修改
                        </el-button>
                        <el-button size="small" text type="primary" @click="onDetail(scope.row)">
                            <el-icon>
                                <ele-View />
                            </el-icon>
                            详情
                        </el-button>
                        <el-popover :visible="deleteRowId === scope.row.id" placement="top">
                            <p class="juque_popover_p">确定删除吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="small" text @click="deleteRowId = undefined">取消</el-button>
                                <el-button size="small" type="primary" @click="onDelete(scope.row)">确认</el-button>
                            </div>
                            <template #reference>
                                <el-button size="small" text type="primary" @click="deleteRowId = scope.row.id">
                                    <el-icon>
                                        <ele-DeleteFilled />
                                    </el-icon>
                                    删除
                                </el-button>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30, 50]" v-model:current-page="formModel.pageInfo.page"
                background v-model:page-size="formModel.pageInfo.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="formModel.pageInfo.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, ref, computed, onMounted, } from 'vue';
import type { FormInstance } from 'element-plus';
import { BaseRequest } from '/@/interfaces/BaseModel';
import { ConfigInfoSearchParamModel, ConfigInfoListModel } from '/@/interfaces/JdfsystemModel';
import { handleSearch, handleDel, handleDetail } from '../config-info-wrap';
import MESSAGE from '/@/enums/message-enum';
import useObjectUtil from '/@/utils/objectUtil';
import { DictInfo } from '/@/enums/dict-info-enum';

interface State {
    datasource: ConfigInfoListModel[],
    formModel: BaseRequest<ConfigInfoSearchParamModel>,
    deleteRowId: string | undefined,
}
export default defineComponent({
    name: 'ConfigInfoList',
    components: {},
    setup(props, context) {
        const searchFormRef = ref<FormInstance>();


        const state = reactive<State>({
            datasource: [],
            formModel: {
                param: {
                    configName: undefined,
                    configCode: undefined,
                },
                pageInfo: {
                    page: 1,
                    limit: 10,
                    total: 0
                }
            },
            deleteRowId: undefined,
        });
        const dictTypeCompute = computed(() => {
            return function (value: any) {
                const dictInfo = DictInfo.yesOrNo;
                return dictInfo ? dictInfo.find(item => value === item.key)?.label : value;
            }
        });
        const dictScopeCompute = computed(() => {
            return function (value: any) {
                const dictInfo = DictInfo.configScope;
                return dictInfo ? dictInfo.find(item => value === item.key)?.label : value;
            }
        });

        const methodMap = reactive({
            onSearch: async function () {
                const response = await handleSearch(state.formModel);
                const { code, data, pageInfo } = response;
                if (code === MESSAGE.OK) {
                    useObjectUtil.copyProperties(pageInfo, state.formModel.pageInfo);
                    state.datasource = [...data];
                }
            },
            onRest: function () {
                searchFormRef.value?.resetFields();

            },
            onAdd: function () {
                context.emit('onAdd');
            },
            onEdit: async function (record: ConfigInfoListModel) {
                if (record && record.id) {
                    const result = await handleDetail(record.id);
                    const { data } = result;
                    context.emit('onEdit', data);
                }
            },
            onDetail: async function (record: ConfigInfoListModel) {
                if (record && record.id) {
                    const result = await handleDetail(record.id);
                    const { data } = result;
                    context.emit('onDetail', data);
                }
            },
            onDelete: async function (record: ConfigInfoListModel) {
                if (record && record.id) {
                    await handleDel([record.id]);
                    methodMap.onSearch();
                }
                state.deleteRowId = undefined;
            },

            onHandleSizeChange: function (val: number) {
                state.formModel.pageInfo.limit = val;
                methodMap.onSearch();
            },
            onHandleCurrentChange: function (val: number) {
                state.formModel.pageInfo.page = val;
                methodMap.onSearch();
            },
        });
        // 挂载完成后
        onMounted(async () => {
        });
        return {
            searchFormRef,
            dictTypeCompute,
            dictScopeCompute,
            ...toRefs(state),
            ...toRefs(methodMap),
        };
    },
});
</script>
<style scoped lang="scss">
@import '/@/views/config-info/config-info.scss';
</style>
